<template>
	<div class="cate-tab1 swiper">
		<ol class="swiper-wrapper">
			<li v-for="(list,index) in pages" :key='index' class="swiper-slide">
				<router-link to='/' v-for="item in list" :key="item.id">
					<img :src="item.imgURL" />
					<p>{{item.title}}</p>
					<p>{{item.msg}}</p>
					<p>￥{{item.price}}起<span>&nbsp;&nbsp;{{item.oldprice}}</span></p>
				</router-link>
			</li>
		</ol>
	</div>
</template>

<script>
	//1.引入vue周期函数
	import {onMounted} from 'vue'
	//2.引入swiper动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'CategoryTab1',
		props:['propscattab1'],
		data(){
			return{
				tab1List : [{"id":1,"imgURL":"img/tab1-1.jpg","title":"广州-丽江 7天跟团游","msg":"含往返飞机票+6晚住宿","price":3493,"oldprice":3888},
						{"id":2,"imgURL":"img/tab1-2.jpg","title":"广州-稻城亚丁 5天跟团游","msg":"含往返飞机票+4晚住宿","price":5677,"oldprice":5888},
						{"id":3,"imgURL":"img/tab1-3.jpg","title":"广州-三亚 5天跟团游","msg":"含往返飞机票(含税)+4晚住宿","price":2500,"oldprice":2688},
						{"id":4,"imgURL":"img/tab1-4.jpg","title":"广州-桂林 9天跟团游","msg":"含单程飞机票单程火车票(含税)+8晚住宿","price":3493,"oldprice":3888},
						{"id":5,"imgURL":"img/tab1-5.jpg","title":"广州-四川 5天跟团游","msg":"特惠立减！宿国际超5星洲际酒店丨峨眉+乐山+都江堰+熊猫乐园丨赠川剧变脸火锅","price":2320,"oldprice":2660},
						{"id":6,"imgURL":"img/tab1-6.jpg","title":"广州-九寨沟 6天跟团游","msg":"自费成都+重庆麻辣双城记|峨眉山+乐山大佛+都江堰洪崖洞|船游夜览两江","price":2980,"oldprice":3122},
						{"id":7,"imgURL":"img/tab1-7.jpg","title":"广州-张家界 4天跟团游","msg":"精致小团｜沱江泛舟｜纯玩一价全含｜高档酒店｜张家界玻璃桥天门山玻璃桥凤凰4日","price":2255,"oldprice":2668},
						{"id":8,"imgURL":"img/tab1-8.jpg","title":"广州-银川 5天跟团游","msg":"塞上江南+大漠长河+千古绝唱+沙坡头+水洞沟+西夏王陵+北堡西部影城宁夏5日","price":3380,"oldprice":4880}
				]
			}
		},
		computed:{
			pages(){
				let arr = [] //空数组，目的是：重组一个二维数组
				let num = 4 //每页条数
				//将原数组遍历
				this.tab1List.forEach( (item,index)=>{
					//i：每页的页码
					let i = Math.floor(index / num)
					//将计算的页码放入新数组内，作为下标：
					//判断该下标是否存在
					if(!arr[i]){
						//第一次出现
						arr[i] = []
						arr[i].push(item)
					}else{
						//已经出现过直接添加
						arr[i].push(item)
					}
				})
				return arr
			}
		},
		setup(){
			onMounted(	()=>{
				new Swiper('.cate-tab1',{
					slidesPerView:1
				})
			})
		}
	}
</script>

<style scoped>
	.cate-tab1{
		height: 8.2rem;
		padding-bottom: 2rem;
	}
	.cate-tab1 ol{
		width: 100%;
		height: 90%;
	}
	.cate-tab1 ol li{
		float: left;
		width: 100%;
		height: 100%;
	}
	.cate-tab1 ol li img{
		width: 4.2rem;
		height: 2.3rem;
		border-radius: 0.3rem;
	}
	.cate-tab1 ol li a{
		width: 48%;
		float: left;
		padding-top: 0.3rem;
	}
	.cate-tab1 ol li a:nth-child(even){
		float: right;
		padding-top: 0.3rem;
	}
	.cate-tab1 ol li a p:nth-child(2){
		padding-top: 0.1rem;
	} 
	.cate-tab1 ol li a p:nth-child(3){
		padding-top: 0.1rem;
		color: gray;
	} 
	.cate-tab1 ol li a p:nth-child(4){
		padding-top: 0.1rem;
		color: orange;
		font-weight: bold;
	}
	.cate-tab1 ol li a p:nth-child(4) span{
		color: gray;
		font-weight: normal;
		text-decoration: line-through;
	}
	.cate-tab1 ol li p{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
